<template>
  <div class="tui">
    <div class="list">
      <div
        class="item"
        v-for="item in list"
        :key="item.id"
        @click="$router.push({ path: '/detail/' + item.id })"
      >
        <div class="top2">
          <img :src="item.avatar" alt="" />
          <div class="right">
            <div class="title">{{ item.stem }}</div>
            <div class="username">
              <span>{{ item.creator }}</span>
              <span> | </span>
              <span>{{ item.createdAt }}</span>
            </div>
          </div>
        </div>
        <div class="middle">
          {{ removeHtmlTags(item.content) }}
        </div>
        <div class="bottom">
          <span>点赞 {{ item.likeCount }}</span>
          <span> | </span>
          <span>浏览 {{ item.views }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await axios({
        url: "http://interview-api-t.itheima.net/h5/interview/query",
        method: "get",
        params: { current: 1, pageSize: 10 },
        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
      });
      // console.log(res)
      this.list = res.data.data.rows;
    },
    removeHtmlTags(html) {
      return html.replace(/<[^>]*>/g, "");
    },
  },
};
</script>

<style lang="less" scoped>
.tui {
  .list {
    margin: 100px 0 60px;
    .item {
      padding: 10px 16px;
      margin: 10px 0;
      border: 1px solid #ebedf0;
      // height: 120px;
      .top2 {
        display: flex;

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }

        .right {
          flex: 1;
          .title {
            font-size: 20px;
            font-weight: 600;
            text-overflow: ellipsis;
            line-clamp: 1;
            // max-lines: 1;
            // white-space: nowrap;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            width: 100%;
          }
          .username{
            color: #999;
            font-size: 14px;
          }
        }
      }
      // 超过两行显示省略号
      .middle {
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2; /* 添加标准属性 */
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
